<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // JS 同步 异步
    // 同步: 按顺序 按步骤执行
    // 异步: 同时执行 也叫并发   setInterval setTimeout ajax  事件

    // 同步
    // 洗衣服(30) =>  吃饭(10) => 上分(60) => 100

    // 异步
    // 洗衣服(30)
    // 吃饭(10)      =>  60
    // 上分(60)


    // console.log("循环开始");
    // for (var i = 1; i <= 10; i++) {
    //     console.log(i);
    // }
    // console.log("循环结束");


    // 同步:  循环一次,执行一次延时器(2s),如果要等待延时器结束继续向后执行  => 10次 => 20s   有问题

    // 异步:  循环一次,启动延时器(等待2s后执行 => 既定的回调函数),继续循环启动下一个 => 10次 => 20s
    // a. 循环10次 => 同时启动10个延时器 => 循环结束 全局 i=11
    // b. 10个延时器 均是 延迟两秒后执行

    // console.log("循环开始");
    // console.time("a");
    // for (var i = 1; i <= 10; i++) {
    //     setTimeout(function () {// 1. 启动延时器 2. 计时两秒后执行回调函数
    //         console.log(i);
    //         console.timeLog("a");
    //     }, 2000);
    // }
    // console.log("循环结束");

    // console.log("循环开始");
    // for (let i = 1; i <= 10; i++) {
    //     setTimeout(function () {// 1. 启动延时器 2. 计时两秒后执行回调函数
    //         console.log(i);
    //     }, 2000);
    // }
    // console.log("循环结束");


    // 但是很尴尬 JS是单线程的.  => 单线程的JS如何实现异步?


</script>

</html>